S08-03 Node-包管理工具

[TOC]

概述

代码共享方案

代码共享需求：我们已经学习了在 JavaScript 中可以通过模块化的方式将代码划分成一个个小的结构：

在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具；
这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用；

~~代码共享方案~~：

如果我们分享给世界上所有的程序员使用，有哪些方式呢？

方式一：上传 GitHub/官网发布
上传到 GitHub 上、其他程序员通过 GitHub 下载我们的代码手动的引用；
缺点：
- 必须知晓地址并手动下载：大家必须知道你的代码 GitHub 的地址，并且从 GitHub 上手动下载；
- 手动引入并关联依赖：
  需要在自己的项目中手动的引用，并且管理相关的依赖；
  不需要使用的时候，需要手动来删除相关的依赖；
  当遇到版本升级或者切换时，需要重复上面的操作；
显然，上面的方式是有效的，但是这种传统的方式非常麻烦，并且容易出错；
方式二：包管理工具
使用一个专业的工具来管理我们的代码，
- 发布：我们通过工具将代码发布到特定的位置；
- 安装：其他程序员直接通过工具来安装、升级、删除我们的工具代码；
显然，通过第二种方式我们可以更好的管理自己的工具包，其他人也可以更好的使用我们的工具包。

npm

npm 介绍【

~~npm（Node Package Manager，Node 包管理器）~~：是 Node.js 官方内置的包管理工具，也是 JavaScript 生态中最成熟、使用最广泛的包管理系统。它不仅用于管理项目依赖（如 React、Vue、Express 等），还提供了包发布、版本控制、脚本运行等核心功能，是 Node.js 开发的基础工具之一。

下载/安装 npm：安装 Node.js 时会自动附带 npm（无需单独安装），开箱即用。

npm 搜索/安装包：

npm 官网：https://www.npmjs.com/

包存放位置：npm registry

发布包：我们发布自己的包其实是发布到 registry 上面的；
安装包：当我们安装一个包时其实是从 registry 上面下载的包；

package.json

概述

事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目还是后端项目：

这个配置文件会记录着你项目的名称、版本号、项目描述等；
也会记录着你项目所依赖的其他库的信息和依赖库的版本号；

这个配置文件在 Node 环境下面（无论是前端还是后端）就是 package.json。

~~package.json~~：是 npm 管理的项目中最核心的配置文件，位于项目根目录，用于描述项目的元信息、依赖关系、脚本命令等关键信息，是 npm 进行依赖管理、脚本执行、包发布的基础。

初始化 package.json

~~创建方式~~：

我们可以创建一个 package.json 文件：

手动创建：
在项目根目录新建 package.json 并填写字段。

自动生成：

执行 npm init，通过交互问答生成（加 -y 可跳过交互，直接生成默认配置）：

bash

npm init -y  # 快速生成基础 package.json

生成结果：

json

{
  "name": "learn-npm",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

~~示例：Vue CLI4 / Vue CLI2 配置~~：

Vue CLI4 对脚手架创建的项目进行了简化，CLI2 创建的项目更加详细：

Vue CLI4Vue CLI2

json

{
  "name": "my-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": ["> 1%", "last 2 versions", "not dead"]
}

json

{
  "name": "vuerouterbasic",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "'coderwhy' <'coderwhy@gmail.com'>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

核心字段

package.json 由一系列键值对组成，以下是最常用的核心字段：

基本元信息字段：

name：必填，项目的名称。发布到 npm 时必须唯一，小写，可包含 - 或 _。
version：必填，版本号，必须遵循 语义化版本。
description：项目描述。
author：作者信息（格式：姓名 <邮箱> (个人主页)，或仅姓名）。
license：开源协议（如 MIT、Apache-2.0，说明用户如何使用此项目）。
private：布尔值，项目是否私有。设为 true 时禁止将项目发布到 npm 仓库。
main：项目入口文件（默认 index.js，当其他包引入当前包时，会加载此文件）。

依赖管理字段：

dependencies：生产环境依赖，项目运行时必须的包，会被打包到最终产物中。
devDependencies：开发环境依赖，仅开发时需要的包，不会被打包到生产环境，安装时需加 -D。
peerDependencies：同伴依赖，声明当前包与其他包的兼容版本（常用于插件开发）。

脚本命令字段：

scripts：自定义脚本命令，通过 npm run <脚本名> 执行，用于启动、测试、打包等。

生命周期钩子：

pre<脚本名>：在目标脚本执行前运行。
post<脚本名>：在目标脚本执行后运行。

其他重要字段：

repository：项目代码仓库地址（如 GitHub 链接），方便他人查看源码。
bugs：问题反馈地址（如 GitHub Issues）。
homepage：项目主页（如官网、文档地址）。
engines：指定项目运行所需的 Node.js 或 npm 版本（避免环境不兼容）。
browserslist：声明前端项目兼容的浏览器范围（供 babel、autoprefixer 等工具使用）。

main 属性：

设置程序的入口。
很多人会有疑惑，webpack 不是会自动找到程序的入口吗？
- 这个入口和 webpack 打包的入口并不冲突；
- 它是在你发布一个模块的时候会用到的；
- 比如我们使用 axios 模块 const axios = require('axios');
- 实际上是找到对应的 main 属性查找文件的；

axios 的入口

scripts 属性

scripts 属性用于配置一些脚本命令，以键值对的形式存在；
配置后我们可以通过 npm run 命令的key来执行这个命令；
npm start和npm run start的区别是什么？
- 它们是等价的；
- 对于常用的 start、 test、stop、restart 可以省略掉 run 直接通过 npm start等方式运行；

dependencies 属性

dependencies 属性是指定无论开发环境还是生成环境都需要依赖的包；
通常是我们项目实际开发用到的一些库模块；
与之对应的是 devDependencies；

devDependencies 属性

一些包在生成环境是不需要的，比如 webpack、babel 等；
这个时候我们会通过 npm install webpack --save-dev，将它安装到 devDependencies 属性中；

疑问：那么在生成环境如何保证不安装这些包呢？

生成环境不需要安装时，我们需要通过 npm install --production 来安装文件的依赖；

package-lock.json【

版本管理

我们会发现安装的依赖版本出现：^2.0.3或~2.0.3，这是什么意思呢？

npm 的包通常需要遵从 semver 版本规范：

semver：https://semver.org/lang/zh-CN/
npm semver：https://docs.npmjs.com/misc/semver

semver 版本规范是 X.Y.Z：

X 主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）；
Y 次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
Z 修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的 bug）；

我们这里解释一下 ^和~的区别：

^x.y.z：表示 x 是保持不变的，y 和 z 永远安装最新的版本；
~x.y.z：表示 x 和 y 保持不变的，z 永远安装最新的版本；

engines 属性

engines 属性用于指定 Node 和 NPM 的版本号；
在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；

browserslist 属性

用于配置打包后的 JavaScript 浏览器的兼容情况，参考；
否则我们需要手动的添加 polyfills 来让支持某些语法；
也就是说它是为 webpack 等打包工具服务的一个属性（这里不是详细讲解 webpack 等工具的工作原理，所以不再给出详情）；

npm 工具解析

npm install 命令

安装 npm 包分两种情况：

全局安装（global install）：npm install yarn -g;
项目（局部）安装（local install）：npm install

全局安装

全局安装是直接将某个包安装到全局：

比如 yarn 的全局安装：

npm install yarn -g

但是很多人对全局安装有一些误会：

通常使用 npm 全局安装的包都是一些工具包：yarn、webpack 等；
并不是类似于 axios、express、koa 等库文件；
所以全局安装了之后并不能让我们在所有的项目中使用 axios 等库；

项目安装

项目安装会在当前目录下生产一个 node_modules 文件夹，我们之前讲解 require 查找顺序时有讲解过这个包在什么情况下被查找；

局部安装分为开发时依赖和生产时依赖：

# 安装开发和生产依赖
npm install axios --save
npm install axios -S
npm install axios
npm i axios

# 开发者
npm install axios --save-dev
npm install axios -D
npm i axios -D

npm install 原理

很多同学之情应该已经会了 npm install <package>，但是你是否思考过它的内部原理呢？

执行 npm install它背后帮助我们完成了什么操作？
我们会发现还有一个成为 package-lock.json 的文件，它的作用是什么？
从 npm5 开始，npm 支持缓存策略（来自 yarn 的压力），缓存有什么作用呢？

这是一幅我画出的根据 npm install 的原理图：

npm install 会检测是有 package-lock.json 文件：
- 检测 lock 中包的版本是否和 package.json 中一致（会按照 semver 版本规范检测）；
- 一致的情况下，会去优先查找缓存
- 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到 node_modules 文件夹中；
- 不一致，那么会重新构建依赖关系，直接会走顶层的流程；
- 没有找到，会从 registry 仓库下载，直接走顶层流程；
- 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况；
- 从 registry 仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）；
- 获取到压缩包后会对压缩包进行缓存（从 npm5 开始有的）；
- 将压缩包解压到项目的 node_modules 文件夹中（前面我们讲过，require 的查找顺序会在该包下面查找）
- 没有 lock 文件
- 有 lock 文件

npm install 原理图

package-lock.json 文件：

json

{
  "name": "learn-npm",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "axios": {
      "version": "0.20.0",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
      "requires": {
        "follow-redirects": "^1.10.0"
      }
    },
    "follow-redirects": {
      "version": "1.13.0",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
    }
  }
}

package-lock.json 文件解析：

name：项目的名称；
version：项目的版本；
lockfileVersion：lock 文件的版本；
requires：使用 requires 来跟着模块的依赖关系；
dependencies：项目的依赖
- version 表示实际安装的 axios 的版本；
- resolved 用来记录下载的地址，registry 仓库中的位置；
- requires 记录当前模块的依赖；
- integrity 用来从缓存中获取索引，再通过索引去获取压缩包文件；
- 当前项目依赖 axios，但是 axios 依赖 follow-redireacts；
- axios 中的属性如下：

其他 npm 命令

我们这里再介绍几个比较常用的：

卸载某个依赖包：

npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D

强制重新 build

npm rebuild

清除缓存

npm cache clean

npm 的命令其实是非常多的：

https://docs.npmjs.com/cli-documentation/cli
更多的命令，可以根据需要查阅官方文档

npx

npx 是 npm5.2 之后自带的一个命令。

npx 的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

我们以 webpack 为例：

全局安装的是 webpack5.1.3
项目安装的是 webpack3.6.0

如果我在终端执行 webpack --version使用的是哪一个命令呢？

显示结果会是 webpack 5.1.3，事实上使用的是全局的，为什么呢？
原因非常简单，在当前目录下找不到 webpack 时，就会去全局找，并且执行命令；

那么如何使用项目（局部）的 webpack，常见的是两种方式：

方式一：明确查找到 node_module 下面的 webpack
方式二：在 scripts定义脚本，来执行 webpack；

方式一：在终端中使用如下命令（在项目根目录下）

./node_modules/.bin/webpack --version

方式二：修改 package.json 中的 scripts

json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --version"
  },

终端中执行：

npm run webpack

但是这两种方式都有一点点麻烦，更好的办法是直接使用 npx：

npx webpack --version

npx 的原理非常简单，它会到当前目录的 node_modules/.bin 目录下查找对应的命令；

yarn

另一个 node 包管理工具 yarn：

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具；
yarn 是为了弥补 npm 的一些缺陷而出现的；
早期的 npm 存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；
虽然从 npm5 版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用 yarn；

这里给出一张常用命令的对比

cnpm

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。

查看 npm 镜像：

npm config get registry # npm config get registry

我们可以直接设置 npm 的镜像：

npm config set registry https://registry.npm.taobao.org

但是对于大多数人来说（比如我），并不希望将 npm 镜像修改了：

第一，不太希望随意修改 npm 原本从官方下来包的渠道；
第二，担心某天淘宝的镜像挂了或者不维护了，又要改来改去；

这个时候，我们可以使用 cnpm，并且将 cnpm 设置为淘宝的镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm config get registry # https://r.npm.taobao.org/

S08-03 Node-包管理工具

概述

代码共享方案

npm

npm 介绍【

package.json

概述

初始化 package.json

核心字段

package-lock.json【

版本管理

npm 工具解析

npm install 命令

npm install 原理

其他 npm 命令

npx

yarn

cnpm

pnpm【

Monorepo

发布包【

S08-03 Node-包管理工具 ​

概述 ​

代码共享方案 ​

npm ​

npm 介绍【 ​

package.json ​

概述 ​

初始化 package.json ​

核心字段 ​

package-lock.json【 ​

版本管理 ​

npm 工具解析 ​

npm install 命令 ​

npm install 原理 ​

其他 npm 命令 ​

npx ​

yarn ​

cnpm ​

pnpm【 ​

Monorepo ​

发布包【 ​

S08-03 Node-包管理工具

概述

代码共享方案

npm

npm 介绍【

package.json

概述

初始化 package.json

核心字段

package-lock.json【

版本管理

npm 工具解析

npm install 命令

npm install 原理

其他 npm 命令

npx

yarn

cnpm

pnpm【

Monorepo

发布包【